<template>
  <div class="fourmbody">
    <div class="fourm_KMDH" id="fourm_KMDH">
      <div @click="addactive($event,'1')">科目一</div>
      <div @click="addactive($event,'2')">科目二</div>
      <div @click="addactive($event,'3')">科目三</div>
      <div @click="addactive($event,'4')">科目四</div>
    </div>
    <div class="fourm_header">
      <div class="header_tittle">
        <div class="active" @click="addactive($event,'00')">全部</div>
        <div id="hea_ti_zx" @click="addactive($event,'01')">最新</div>
        <div id="hea_ti_zr" @click="addactive($event,'02')">最热</div>
        <div id="hea_ti_km" style="width: 80px;display: none">科目分类</div>
      </div>
      <div class="header_search">
        <p style="float: right">右下方导航查看更多信息</p>
      </div>
      <div class="handlee" @click="opencloseKMDH"><i class="iconfont icon-xiala1"/></div>
    </div>
    <div class="fourm_contain">
      <el-scrollbar class="contain_left" max-height="520px">
        <div class="con_leftli" v-for="(item,index) in Postlist" :key="index" @click="change1(index)">
            <div style="display: flex;align-items: center;justify-content: center;width: 100px">
              <el-avatar :size="80" :src="item.img" style="border: 1px solid #89b7ff"/>
            </div>
            <div class="left_li">
              <div>{{item.title}}</div>
              <div>
                <div>
                  <span style="margin-right: 20px">发布于 {{item.date}}</span>
                </div>
                <div>
                  <span style="padding: 0 0 0 20px">总浏览数 {{item.click}}</span>
                </div>
              </div>
            </div>
          <div class="kemubac"></div>
          <p class="kemutype">{{item.subject}}</p>
          </div>
        <div style="position: absolute;bottom: 0;height: 40px;border: 1px solid #cfcfff" >
          <el-pagination
              v-model:currentPage="currentPage1"
              :page-size="pagesize"
              background
              layout="total, prev, pager, next"
              :total="num"
              @current-change="handleCurrentChange"
          />
        </div>
        <el-empty description="暂无帖子" v-if="isempty"/>
      </el-scrollbar>

      <div class="contain_right" v-if="LoginI">
        <div>
          <div class="imgbox">
            <el-avatar :size="140" :src="Loginer.img" />
          </div>
        </div>
        <div style="border: 1px solid #4da9ff;color: #4da9ff;padding: 2px 4px 2px 4px">
          <p v-if="Loginer.coachId">学员-</p>
          <p v-else>教练-</p>
          <p v-if="Loginer.coachId" style="line-height: 24px ">{{Loginer.userId}}</p>
          <p v-else style="line-height: 24px ">{{Loginer.id}}</p>
        </div>
        <div>
          <span v-if="DJvalue>=0&&DJvalue<1" style="padding: 0 10px">小白</span>
          <span v-else-if="DJvalue<2" style="padding: 0 10px">入门</span>
          <span v-else-if="DJvalue<3" style="padding: 0 10px">资深</span>
          <span v-else style="padding: 0 10px">宗师</span>
          <el-progress :percentage="percentagevalue" :show-text="false" style="flex: 1"/>
        </div>
        <div>
          <div style="display: flex;justify-content: space-evenly;font-weight: 600">
            <P>{{ clicklikepost.postNum }}</P>
            <P>{{clicklikepost.replyNum}}</P>
            <P v-if="clicklikepost.postNum == '0'">{{clicklikepost.likeNum}}</P>
            <P v-else>{{clicklikepost.likeNum/clicklikepost.postNum}}</P>
          </div>
          <div style="display: flex;justify-content: space-evenly;font-size: 14px">
            <P>发帖</P><P>回帖</P><P>获赞</P>
          </div>
        </div>
      </div>
      <div class="contain_right" v-else>
        <p class="con_rightbut" @click="reDL">
          用户登陆后可查看
        </p>
        <p style="font-weight: 600;font-size: 18px">登陆后获得以下权益</p>
        <ul>
          <li style="color: #4da9ff;font-weight: 600;margin: 5px">发帖</li>
          <li style="color: #4da9ff;font-weight: 600;margin: 5px">回帖</li>
        </ul>
      </div>
    </div>
    <div class="menu-box" v-if="LoginI">
      <!-- 图标按钮 -->
      <div class="menu-button" @click="ClickDHL">
        <div class="line-box">
          <div class="line"></div>
          <div class="line"></div>
          <div class="line"></div>
        </div>
      </div>
      <!-- 菜单列表 -->
      <ul class="menu-list">
        <li @click="myPost"><i class="iconfont icon-wofadetiezi"></i><span>我的帖子</span></li>
        <li @click="toPost"><i class="iconfont icon-huifu"></i><span>发布帖子</span></li>
        <li @click="toHome"><i class="iconfont icon-shouye"></i><span>首页</span></li>
      </ul>
    </div>
  </div >
</template>

<script setup>
import { ref } from 'vue'
import {ElMessage} from "element-plus";
import {
  Document,
  Menu as IconMenu,
  Location,
  ChatDotRound,
  Search,
} from '@element-plus/icons-vue'
import router from "@/router";
import {useStore} from "vuex";
import {getAllPost1, getAllPost2, getAllPosts, getInforByIdType, getPostsBySubject, InPostClick} from "@/api/post";
import {getStudentById} from "@/api/student";
import {getTeacherById} from "@/api/teacher";
const store = useStore()
const LoginI = store.getters.Id
const Loginer = JSON.parse(localStorage.getItem('loginer'))

const headlebox = ref('')

//分页器
const currentPage1 = ref(1)
const pagesize = ref(5)
const num = ref(0)
const pagetype = ref('00')

const isempty = ref(false)
const percentagevalue = ref(0)
const DJvalue = ref(0)

//帖子
const Postlist = ref({})
const clicklikepost = ref({})

//我的点赞，回帖，发帖
getInforByIdType({id:LoginI,type:store.getters.Type}).then(res=>{
  if (res.code === 20041){
    clicklikepost.value = res.data
    percentagevalue.value = (res.data.postNum+res.data.replyNum+res.data.likeNum)%100
    //向下取整
    DJvalue.value = Math.floor((res.data.postNum+res.data.replyNum+res.data.likeNum)/100)
  }else {
    ElMessage.error('发帖数，回帖数，点赞数获取失败')
  }
})

//获得全部帖子信息
const GetAllPostList = async () =>{
  await getAllPosts({pageNum:currentPage1.value,pageSize:pagesize.value}).then(res=>{
    if (res.code === 20041){
      Postlist.value = res.data.list
      num.value = res.data.total
      isempty.value = res.data.total === 0;
    }else {
      ElMessage.info('数据为空')
    }
  })
}
GetAllPostList()
//获得最新帖子信息
const GetZXPostList = async () =>{
  await getAllPost1({pageNum:currentPage1.value,pageSize:pagesize.value}).then(res=>{
    if (res.code === 20041){
      Postlist.value = res.data.list
      num.value = res.data.total
      isempty.value = res.data.total === 0;
    }else {
      ElMessage.info('数据为空')
    }
  })
}
//获得最热帖子信息
const GetZRPostList = async () =>{
  await getAllPost2({pageNum:currentPage1.value,pageSize:pagesize.value}).then(res=>{
    if (res.code === 20041){
      Postlist.value = res.data.list
      num.value = res.data.total
      isempty.value = res.data.total === 0;
    }else {
      ElMessage.info('数据为空')
    }
  })
}
//科目分区获得帖子
const GetPostsBySubject = async () => {
  await getPostsBySubject({pageNum:currentPage1.value,pageSize:pagesize.value,subject:pagetype.value}).then(res=>{
    if (res.code === 20041){
      Postlist.value = res.data.list
      num.value = res.data.total
      isempty.value = res.data.total === 0;
    }else {
      ElMessage.info('数据为空')
    }
  })
}

//下方导航
const ClickDHL = () =>{
  // 要操作的元素
  const menu_box=document.querySelector('.menu-box');
  menu_box.classList.toggle('active');

}
//分类导航(最新，最热，全部)
const addactive = async (event,type) =>{
  let heatizx = document.getElementById('hea_ti_zx')
  let heatizr = document.getElementById('hea_ti_zr')
  let heatikm = document.getElementById('hea_ti_km')
  let fourmKMDH = document.getElementById('fourm_KMDH')
  const headertittle = document.querySelector('.header_tittle')
  headertittle.childNodes.forEach((item)=>{
    item.classList.remove('active')
  })
  event.target.classList.add('active')
  pagetype.value = type
  currentPage1.value = 1
  if (type === '00'){
   await GetAllPostList()
    heatizx.style.display = 'flex'
    heatizr.style.display = 'flex'
    heatikm.style.display = 'none'
    fourmKMDH.classList.remove('active')
  }else if (type === '01'){
    await GetZXPostList()
  }else if (type === '02'){
    await GetZRPostList()
  }else {
    fourmKMDH.classList.remove('active')
    heatizx.style.display = 'none'
    heatizr.style.display = 'none'
    heatikm.style.display = 'flex'
    heatikm.classList.add('active')
    await GetPostsBySubject()
  }
}

//分页器
const handleCurrentChange = async () =>{
  if (pagetype.value === '00'){
    await GetAllPostList()
  }else if (pagetype.value === '01'){
    await GetZXPostList()
  }else if (pagetype.value === '02'){
    await GetZRPostList()
  }else {
    await GetPostsBySubject()
  }
}
//去登陆
const reDL = () =>{
  router.replace('/login')
}

//查看帖子
const change1 = async (index) =>{
  await InPostClick(Postlist.value[index].postId).then(res=>{
    if (res.code === 20031){
      console.log(res.data)
    }else {
      console.log(res.data)
    }
  })
  await store.dispatch('app/OnePost', Postlist.value[index])
  await router.replace('/onepost')
}
//我的帖子
const myPost = () =>{
  router.replace('/mypost')
}
//发布帖子
const toPost = () =>{
  router.replace('/post')
}
//帖子首页
const toHome = () =>{
  router.replace('/fourmm')
}

//open/close科目分类
const opencloseKMDH = () =>{
  let fourmKMDH = document.getElementById('fourm_KMDH')
  if (fourmKMDH.classList.contains('active')){
    fourmKMDH.classList.remove('active')
  }else {
    fourmKMDH.classList.add('active')
  }

}

</script>

<style scoped>

.icon-xiala1{
  font-size: 26px;
}
.input-with-select {
  width: 200px;
  float: right;
  background-color: var(--el-fill-color-blank);
}

.fourmbody{
  flex: 1;
  overflow: hidden;
  display: flex;
  position: relative;
  flex-direction: column;
  background-color: white;
}
.fourm_KMDH{
  height: 0;
  min-height: 0;
  margin: 0 10px;
  display: flex;
  position: relative;
  justify-content: space-evenly;
  align-items: center;
  overflow: hidden;
  box-sizing: border-box;
  transition: height .2s ease, min-height .2s ease;
  /*border: 1px solid red;*/
}
.fourm_KMDH>div{
  width: 15%;
  height: 55px;
  font-size: 20px;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid #9ebcff;
  transition: transform .2s ease;
  background: linear-gradient(to right , #548bff, #7a7ae7);
}
.fourm_KMDH>div:hover{
  transform: scale(0.98);
}
.fourm_KMDH.active{
  height: 60px;
  min-height: 60px;
}
.handlee{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%,-5px);
  width: 80px;
  height: 20px;
  text-align: center;
  /*border: 1px solid blue;*/
  animation: ease animatehandle 2.6s infinite;
}
@keyframes animatehandle {
  0%{opacity: 0}
  25%{opacity: 0.5}
  50%{opacity: 0.8}
  75%{opacity: 0.5}
  100%{opacity: 0}
}
.fourm_header{
  height: 40px;
  box-sizing: border-box;
  margin: 5px 10px 0 10px;
  display: flex;
  position: relative;
  justify-content: space-between;
  background-color: #f5f7fa;
  border: 1px solid #dadada;
  border-bottom: none;
}
.header_tittle{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: start;
  box-sizing: border-box;
  cursor: pointer;
}
.header_tittle>div{
  height: 100%;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: inherit;
  color: #97a8be;
}
.header_tittle>div:hover{
  color: #4da9ff;
}
.header_tittle>div.active{
  background-color: #ffffff;
  color: #4da9ff;
  border-bottom: none;
}
.header_search{
  flex: 1;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: end;
}
.header_search>p{
  opacity: 0.6;
}
.fourm_contain{
  flex: 1;
  box-sizing: border-box;
  margin: 0 10px;
  display: flex;
  border: 1px solid #dadada;
  border-top: none;
}
.contain_left{
  flex: 0.8;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.con_leftli{
  height: 90px;
  box-sizing: border-box;
  margin: 10px 10px 0 10px;
  display: flex;
  position: relative;
  border: 1px solid #cbcbcb;
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow .2s ease;
}
.kemubac{
  position: absolute;
  right: -40px;
  top: -50px;
  width: 120px;
  height: 90px;
  transform: rotate(35deg);
  background-color: #4da9ff;
}
.kemutype{
  position: absolute;
  right: 0;
  font-weight: 600;
  padding: 5px;
  color: white;
}
.con_leftli:hover{
  box-shadow: #cccccc 0 0 6px;
}
.contain_right{
  flex: 0.2;
  box-sizing: border-box;
  margin: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  border: 1px solid #dadada;
}
.con_rightbut{
  position: absolute;
  top: 50%;left: 50%;
  transform: translate(-50%,-50%);
  font-weight: 600;
  font-size: 20px;
  opacity: 0.4;
  white-space: nowrap;
  transition: opacity .2s ease;
}
.con_rightbut:hover{
  opacity: 0.8
}
.contain_right>div:first-child{
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin-top: 10%;
  border-radius: 50%;
  background: linear-gradient(to right, #4aa6ff, #00fff0);
}
.imgbox{
  width: 148px;
  height: 148px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: white;
}
.contain_right>div:nth-child(2){
  box-sizing: border-box;
  margin-top: 20px;
  font-weight: 600;
  display: flex;
}
.contain_right>div:nth-child(3){
  box-sizing: border-box;
  margin-top: 20px;
  width: 90%;
  display: flex;
}
.contain_right>div:last-child{
  box-sizing: border-box;
  margin-top: 20px;
  width: 90%;
}
.left_li{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 10px;
}
.left_li>div:first-child{
  font-weight: 600;
  font-size: 20px;

}
.left_li>div:last-child{
  font-size: 14px;
  display: flex;
  justify-content: space-between;
}



.menu-box{
  /* 固定定位 右下角 */
  position: fixed;
  bottom: 40px;
  right: 40px;
}
/* 菜单按钮 */
.menu-button{
  width: 50px;
  height: 50px;
  background-color: #5c67ff;
  border-radius: 50%;
  /* 投影 */
  box-shadow: 0 0 0 4px rgba(92,103,255,0.3);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
  cursor: pointer;
  /* 过渡 */
  transition: 0.2s ease-in;
}
.menu-button:hover{
  background-color: #4854ff;
  box-shadow: 0 0 0 8px rgba(92,103,255,0.3);
}
.menu-button .line-box{
  width: 20px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: transform 0.3s ease-out;
}
/* 菜单按钮图标（三条杠） */
.menu-button .line{
  background-color: #fff;
  width: 100%;
  height: 2px;
  border-radius: 2px;
}
/* 前后两条短，中间的长 */
.menu-button .line:first-child{
  width: 50%;
  /* 设置变换的基点 */
  transform-origin: right;
  /* 过渡效果 */
  transition: transform 0.3s ease-in-out;
}
.menu-button .line:last-child{
  width: 50%;
  align-self: flex-end;
  transform-origin: left;
  transition: transform 0.3s ease-in-out;
}
/* 菜单列表 */
.menu-list{
  width: 140px;
  height: 160px;
  background-color: #fff;
  border-radius: 8px;
  list-style: none;
  padding: 6px;
  box-shadow: 0 0 4px 4px rgba(92,103,255,0.15);
  position: absolute;
  right: 15px;
  bottom: 15px;
  /* 默认隐藏 */
  opacity: 0;
  transform: scale(0);
  /* 设置变换的基点 */
  transform-origin: bottom right;
  /* 过渡效果 */
  transition: 0.3s ease;
  /* 过渡延迟 */
  transition-delay: 0.1s;
}
/* 菜单项 */
.menu-list li{
  display: flex;
  align-items: center;
  padding: 10px;
  color: #1c3991;
  cursor: pointer;
  position: relative;
  /* 默认隐藏 */
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.2s ease-in;
}
.menu-list li:hover{
  color: #5c67ff;
}
/* 菜单项下边框 */
.menu-list li::before{
  content: "";
  width: calc(100% - 24px);
  height: 1px;
  background-color: rgba(92,103,255,0.1);
  position: absolute;
  bottom: 0;
  left: 12px;
}
/* 最后一项不用下边框 */
.menu-list li:last-child::before{
  display: none;
}
/* 菜单项图标 */
.menu-list .fa{
  font-size: 18px;
  width: 18px;
  height: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 菜单项文本 */
.menu-list span{
  font-size: 14px;
  margin-left: 8px;
}
/* 活动态下的部分样式变化 */
/* 三条杠的变化 */
.active .line-box{
  transform: rotate(-45deg);
}
.active .line-box .line:first-child{
  transform: rotate(-90deg) translateX(1px);
}
.active .line-box .line:last-child{
  transform: rotate(-90deg) translateX(-1px);
}
/* 菜单列表的变化 */
.active .menu-list{
  opacity: 1;
  transform: scale(1);
}
.active .menu-list li{
  /* 执行动画：动画名 时长 线性 停留在最后一帧 */
  animation: fade-in-item 0.4s linear forwards;
}
/* 接下来为每一项设置动画延迟时间 */
.active .menu-list li:nth-child(1){
  animation-delay: 0.1s;
}
.active .menu-list li:nth-child(2){
  animation-delay: 0.2s;
}
.active .menu-list li:nth-child(3){
  animation-delay: 0.3s;
}
.active .menu-list li:nth-child(4){
  animation-delay: 0.4s;
}

/* 定义动画 */
@keyframes fade-in-item {
  100%{
    transform: translateX(0);
    opacity: 1;
  }
}
</style>